<template>
	<form class="kyc-basic-modal px-[25px] md:px-[35px] pt-4 pb-10" @submit.prevent="onEnter">
		<input type="submit" class="hidden" />
		<BaseInput
			v-model="formValue.name"
			:name="FormFieldName.nameFirst"
			labelT="account.firstName" />
		<BaseInput
			v-model="formValue.lastName"
			:name="FormFieldName.nameLast"
			labelT="account.lastName" />
		<div class="mb-4">
			<div class="mb-[6px]">
				<span>{{ $t('account.birthday') }}</span>
				<!--<span class="text-danger">*</span>-->
			</div>
			<n-date-picker
				v-model:value="formValue.birthday"
				type="date"
				size="large"
				:actions="[]"
				:is-date-disabled="dateDisabled">
				<template #date-icon><BaseIcon name="calendar" size="16" /></template>
			</n-date-picker>
		</div>
		<BaseSelect
			v-model="formValue.country"
			:options="_country"
			labelT="account.country"
			class="mb-4"
			filterable
			filter-field="text"
			min-width="trigger"
			iconClass=" rounded-full" />
		<BaseInput v-model="formValue.city" :name="FormFieldName.city" labelT="account.city" />
		<BaseInput v-model="formValue.address" :name="FormFieldName.address" labelT="account.address" />
		<base-button
			class="mt-10"
			type="primary"
			:loading="loading"
			@click="onEnter"
			textT="action.submit" />
	</form>
</template>

<script setup lang="ts">
import { computed, reactive } from 'vue'
import { isAfter, subYears } from 'date-fns'
import { DatePickerProps, NDatePicker } from 'naive-ui'
import { setVerifyBasicInfo } from '@/api/profile'
import { BaseButton, BaseIcon, BaseInput, BaseSelect } from '@/components/base'
import { FormFieldName } from '@/enums'
import { useRequest } from '@/hooks'
import { useProfileStore } from '@/store'
import { countryOptions } from '@/store/modules/app-data'
import { t } from '@/utils'

const profileStore = useProfileStore()
const formValue = reactive({
	address: profileStore.userInfo?.address || '',
	birthday: profileStore.userInfo?.birthday || subYears(new Date(), 18).getTime(),
	city: profileStore.userInfo?.city || '',
	country: profileStore.userInfo?.country || '',
	lastName: profileStore.userInfo?.lastName || '',
	name: profileStore.userInfo?.name || ''
	// postalCode: profileStore.userInfo?.postalCode || '',
	// profession: profileStore.userInfo?.profession || ''
})
const _country = computed(() => countryOptions.map((item) => ({ ...item, text: t(item.textT) })))

const dateDisabled: DatePickerProps['isDateDisabled'] = (date: number) => {
	// 计算18年前的日期
	const maxDate = subYears(new Date(), 18)
	return isAfter(date, maxDate)
}
const { run, loading } = useRequest(setVerifyBasicInfo, {
	showError: true,
	showSuccess: t('tip.submitSuccess'),
	onSuccess: () => {
		profileStore.getUserInfo()
		profileStore.show.baseInfo = false
	}
})
const onSubmit = async () => {
	await run({ ...formValue })
}
const onEnter = async () => {
	await onSubmit()
}
</script>
